<%--
  Created by IntelliJ IDEA.
  User: ccc
  Date: 2021/11/21
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DEPT主页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<hr>

<div id="deptapp" class="container">
    <div style="padding-left: 44px">
        <button class="btn btn-default" type="button" @click="addModal()">新增</button>
    </div>
    <br>
    <table class="table">
        <tr class="row">
            <th>DEPTNO</th>
            <th>DNAME</th>
            <th>LOC</th>
            <th>ACTION</th>
        </tr>
        <tr v-for="dept in depts" class="row">
            <td>{{dept.deptno}}</td>
            <td>{{dept.dname}}</td>
            <td>{{dept.loc}}</td>
            <td>
                <button class="btn btn-default" type="button" @click="updateModal(dept.deptno)">修改</button>&nbsp;&nbsp;&nbsp;&nbsp;<button
                    class="btn btn-default" type="button" @click="deleteDept(dept.deptno)">删除
            </button>
            </td>
        </tr>
    </table>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModallable">ADDDEPT</h4>
                </div>
                <form @submit.prevent="addDept()">
                    <div class="modal-body">
                        <input type="hidden" name="deptno" v-model="adddept.deptno">
                        <div class="form-group">
                            <label class="control-label">DNAME:</label>
                            <input type="text" class="form-control" name="dname" v-model="adddept.dname">
                        </div>
                        <div class="form-group">
                            <label class="control-label">LOC</label>
                            <input class="form-control" name="loc" v-model="adddept.loc"></input>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">ADDDEPT</h4>
                </div>
                <form @submit.prevent="updateDept()">
                    <div class="modal-body">

                        <div class="form-group">
                            <label class="control-label">DEPTNO:</label>
                            <input type="text" class="form-control" readonly="readonly" name="deptno"
                                   v-model="updept.deptno">
                        </div>
                        <div class="form-group">
                            <label class="control-label">DNAME:</label>
                            <input type="text" class="form-control" name="dname" v-model="updept.dname">
                        </div>
                        <div class="form-group">
                            <label class="control-label">LOC</label>
                            <input class="form-control" name="loc" v-model="updept.loc"></input>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script>
    var div1 = new Vue({
            el: '#deptapp',
            data: {
                depts: [],
                adddept: {deptno: 0, dname: '', loc: ''},
                updept: {deptno: 0, dname: '', loc: ''}
            },
            methods: {
                addModal: function () {
                    $("#addModal").modal('show');
                },
                updateModal: function (id) {
                    for (let x of this.depts) {
                        if (x.deptno == id) {
                            this.updept.dname = x.dname;
                            this.updept.deptno = x.deptno;
                            this.updept.loc = x.loc;
                        }
                    }
                    $("#updateModal").modal('show');
                },
                updateDept: function () {
                    $.ajax({
                        url: '/dept',
                        type: 'PUT',
                        data: JSON.stringify(div1.updept),
                        contentType: 'application/json',
                        success: function (res) {
                            for (let x of div1.depts) {
                                if (x.deptno == res.deptno) {
                                    x.loc = res.loc;
                                    x.dname = res.dname;
                                }
                            }
                            $("#updateModal").modal('hide');
                        }
                    })
                },
                addDept: function () {
                    $.ajax({
                        url: '/dept',
                        type: 'POST',
                        data: JSON.stringify(div1.adddept),
                        contentType: 'application/json',
                        success: function (data) {
                            div1.depts.push(data);
                            $("#addModal").modal('hide');
                        }
                    })
                },
                deleteDept:function (id){
                    $.ajax({
                        url: '/dept'+id,
                        type: 'DELETE',
                        success: function (data) {
                            if (data==200) {
                                // for (let i = 0; i < div1.depts.length; i++) {
                                //     if (div1.depts[i].deptno == id) {
                                //         div1.depts.splice(i, 1);
                                //     }
                                // }
                                for (let x of div1.depts) {
                                    if (x.deptno == id){
                                        div1.depts.splice(div1.depts.indexOf(x),1);
                                    }
                                }
                            }
                        }
                    })
                }
            }
        }
    );
    $(function () {
        $.ajax({
            url: '/depts',
            type: 'GET',
            success: function (data) {
                div1.depts = data;
            }
        })
    })
</script>
</body>
</html>
